<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>平台管理系统</title>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="webjars/element-ui/index.css"/>
    <style type="text/css">
        .login-container {
            /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-clip: padding-box;
            margin: 180px auto;
            width: 350px;
            padding: 35px 35px 15px 35px;
            background: #fbfdff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
    </style>
</head>
<body style="background-color: #324157">
    <div id="login">
        <el-form :model="userForm" :rules="rules" ref="userForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
            <h3 class="title">平台管理系统</h3>
            <el-form-item prop="userName">
                <el-input type="text" v-model="userForm.userName" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="userForm.password" @keyup.enter.native="handleSubmit" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-checkbox v-model="checked" class="remember">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining" size="medium">
                    登&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;录
                </el-button>
            </el-form-item>
            <p style="font-size:12px;line-height:30px;color:#999;">Tips : {{tips}}</p>
        </el-form>
    </div>
</body>

<!-- 先引入 Vue -->
<script type="text/javascript" src="webjars/vue/vue.min.js"></script>
<!-- 引入组件库 -->
<script type="text/javascript" src="webjars/element-ui/index.js"></script>
<script type="text/javascript" src="webjars/axios/axios.min.js"></script>

<script type="text/javascript">
    var login = new Vue({
       el: "#login",
        data:{
            tips:'请填写正确的用户名和密码登录。',
            userForm: {
                userName: '',
                password: ''
            },
            logining: false,
            checked: false,
            rules: {
                userName: [{
                    required: true, message: '请输入用户名', trigger: 'blur'
                }],
                password: [{
                    required: true, message: '请输入密码', trigger: 'blur'
                }]
            }
        },
        methods: {
            handleSubmit: function () {
                var self = this;
                axios.post("asyncLogin", self.userForm).then(function (response) {
                    if (response.data.success) {
                        localStorage.Authorization = response.data.result.Authorization;
                        window.location.href = "main.html";
                    } else {
                        self.tips = response.data.message;
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            }
        },
        mounted: function () {

        }
    });
</script>
</html>